import React, { useEffect, useState } from "react"
import styles from "./addDefence.less"
import {IRouteComponentProps} from 'umi'
import { Button, Form, Input, Select, DatePicker, Cascader, Table } from 'antd';
import {SaveOutlined} from "@ant-design/icons"
import useStore from "@/context/useStore"
import { observer } from "mobx-react-lite"
import { getClasssPlanTree, selectStationLabel,addDefencelist,selectClassPlanInit} from "@/services/index"
import {ISkillLabel,proManagementList,addDefence,defenceResList,ClassPlanInit} from '@/utils/interface'
const { RangePicker } = DatePicker;


const QuestionHandle:React.FC<IRouteComponentProps>=()=>{

    let { addDefence } = useStore()
    const [title, settitle] = useState<ISkillLabel[]> ([]);
    const [classsPlanTree, setClasssPlanTree] = useState<proManagementList[]>([]);
    const [defencelist, setdefence] = useState<defenceResList> ({} as defenceResList);
    const [flag, setflag] = useState (true);
    //小组名
    const [groupname,setgroupname]=useState('');
    //成员数
    const [members,setmembers]=useState('');
    //任务
    const [taskList,settaskList]=useState('');
    //成员
    const [stuList,setstuList]=useState([]);

    const columns=[
        {
            title:'姓名',
            dataIndex:'name'
        },
        {
            title:'任务',
            dataIndex:'taskList'
        }
    ]

    let pueryparams = {
        classplan: [],          //[班级计划 id ,班级计划  第二层 id ]
        defenceAdress: '',  //答辩地址
        defenceAuthorName: '郭老师',  //用户名称
        defenceClassId: '',     //班级计划 id
        defenceCreateTime: '',  //开始时间
        defenceEndTime: '',     //结束时间
        defenceId: '',          // 空
        defenceMajorId:'',      //专业id
        defencePlanId: '',      //班级计划  第二层 id
        defenceScore: '',       //空
        degenceName:'',         //答辩名称
        majorList: '',          //空
        time:[]                 //[开始 结束]时间
    }
    useEffect(() => {
        getClasssPlanTree().then(res=>{
            console.log(res);
            setClasssPlanTree(res.data)
        })
        selectStationLabel().then(res=>{
            console.log(res);
            settitle(res.data)
        })
    }, [])
    
    function finishi(value:any) {
        let {classplan,defenceAdress,defenceMajorId,degenceName} = value;
        console.log(value);
        
        function add0(m:any){return m<10?'0'+m:m }

        function format(timechuo:any)
        {
            var time = new Date(timechuo);
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
        }

        let defenceCreateTime = format(value.time[0]._d);
        console.log(defenceCreateTime);
        let defenceEndTime = format(value.time[1]._d);
        console.log(defenceEndTime);
        
        let newpueryparams = {...pueryparams,classplan,defenceAdress,defenceMajorId,degenceName,defenceClassId:classplan[0],defencePlanId:classplan[1],defenceCreateTime,defenceEndTime,time:[defenceCreateTime,defenceEndTime]}
        console.log(newpueryparams);
        addDefencelist(newpueryparams).then(res=>{
            if(res.code == 200){
                setdefence(res.data)
            }
        })
        //发起下方的 请求
        let params:ClassPlanInit = {classid:value.defenceClassId,classPlanid:value.defencePlanId}
        selectClassPlanInit(params).then(res=>{
            console.log(res);
            if(res.data.list[0]){
                setgroupname(res.data.list[0].groupname)
                setmembers(res.data.list[0].members)
                settaskList(res.data.list[0].taskList.length)
                setstuList(res.data.list[0].stuList)
            }
        })
    }
    useEffect(() => {
        setflag(!flag)
    }, [defencelist])


    return <div className={styles.defence}>
    <div className={styles.box}>
        <section className={styles.top}>
            <div className={styles.left}>
                <span className={styles.ico}></span>
                <span className={styles.title}>发起答辩</span>
            </div>
            <div className={styles.right}>
                <Button className={styles.butlast}>返回</Button>
                <Button className={styles.butpop} type="primary">提交</Button>
            </div>
        </section>
        <section className={styles.but}>
            <Form  onFinish={finishi}>
                <Button  htmlType="submit" className={styles.button}>
                    <SaveOutlined />保存
                </Button>
               {
                   flag?
                   <div className={styles.newbutbox}>
                       <div className={styles.Inpone}>
                            <div>
                                答辩名称:{defencelist.degenceName}
                            </div>
                            <div className={styles.rightmajorName}>
                                专业:{defencelist.majorName}
                            </div>
                       </div>
                       <div className={styles.Inptwo}>
                           <div>
                               答辩时间:{`${defencelist.defenceCreateTime}至${defencelist.defenceEndTime}`}
                           </div>
                       </div>
                       <div className={styles.Inpone}>
                            <div>
                                班级/计划：{`${defencelist.className}/${defencelist.planName}`}
                            </div>
                            <div className={styles.defenceAdress}>
                                答辩地址:{defencelist.defenceAdress}
                            </div>
                       </div>
                       <div className={styles.Inpthree}>
                            <p><b>发起人</b>郭老师</p>
                        </div>
                   </div>:
                   <div className={styles.butbox}>
                        <div className={styles.Inpone}>
                            <Form.Item label="答辩名称" name="degenceName" rules={[{required: true, message:"请输入答辩名称"}]}>
                                <Input  className={styles.option} />
                            </Form.Item>
                            <Form.Item label="专业" name="defenceMajorId" rules={[{required: true, message:"请选择专业"}]}>
                            <Select className={styles.option}>
                                {/* <Select.Option value='title' >123</Select.Option> */}
                                {
                                    title.map(item=>{
                                        return <Select.Option value={item.id} key={item.id} >{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        </div>
                        <div className={styles.Inptwo}>
                        <Form.Item label="答辩时间" name="time" rules={[{required: true, message:"请选择答辩时间"}]}>
                            {/* <Space> */}
                                <RangePicker />
                            {/* </Space> */}
                        </Form.Item>
                    </div>
                    <div className={styles.Inpone}>
                        <Form.Item label="班级/计划" name="classplan" rules={[{required: true, message:"请选择班级/计划"}]}>
                                <Cascader
                                    // defaultValue={['zhejiang', 'hangzhou', 'xihu']}
                                    options={classsPlanTree}
                                    // onChange={onChange}
                                />
                        </Form.Item>
                        <Form.Item label="答辩地址" name="defenceAdress" rules={[{required: true, message:"请输入答辩地址"}]}>
                            <Input  className={styles.option} />
                        </Form.Item>
                    </div>
                    <div className={styles.Inpthree}>
                        <p><b>发起人</b>郭老师</p>
                    </div>
                   </div>
               }
            </Form>
        </section>
        <section>
            <div>
                <p>{groupname}</p>
                <div>
                    <div>
                        <span>成员{members}名</span>
                        <span>任务{/* {taskList} */}0个</span>
                        <span>时长52天</span>
                    </div>
                    <div>
                        <span>清空</span>
                        <span><input type="checkbox"/>已完成未评分</span>
                        <span><input type="checkbox"/>已答辩</span>
                    </div>
                </div>
                <Table columns={columns}/>
            </div>
        </section>
    </div>
</div>   
}

export default observer(QuestionHandle)